import { ref } from 'vue'
import { findTopCategory } from '@/api/category'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
function usecategory () {
  const categoryList = ref({})
  const route = useRoute() // 等于 this,$route
  /* id = route.params.id 在首次渲染完毕的之后 不传参数的时候 以当前的路由参数为主 ， 当路由切换的时候 以传入的id为主 。 */
  async function fetchcategory (id = route.params.id) {
    // 在setup中获取路由参数ID
    // const res = await findTopCategory(route.params.id) //route.params.id旧的路由id ，表示页面一上来以默认的数据为主
    // 传参数 id
    const res = await findTopCategory(id) // 在fetchcategory（id :加默认参数）解决默认数据显示的问题
    // console.log(res)
    categoryList.value = res.data.result
  }

  fetchcategory()

  // 借助函数onBeforeRouteUpdate实现
  onBeforeRouteUpdate((to) => {
    // to:目标路由对象
    // 在每次路由切换的时候自动执行
    // to.params.id新的路由id
    // console.log('路由切换了', to.params.id)
    // 以最新的id获取最新的数据    以传参的方式 调用 fetchcategory得到新的路由ID，将旧的路由id注释掉 以参数id为准 有默认值就走无默认值就用传来的参数
    fetchcategory(to.params.id)
  })
  return { categoryList }
}
export default usecategory

/**
 *路由缓存机制 （不是bug）：
  路由path没变 只是参数发生了变化 vue-router会直接复用component
  复用之后会导致 路由对应的组件不会重新渲染 所有的生命周期不会执行 新id对应的新数据就不会请求接口
  表现出来的样子就是 - 虽然看起来id已经变了 但是内容没变

  如何解决？ 看场景  如果当前没有性能要求 选1  如果有性能要求选2
   1. 不走缓存 破坏缓存 - 粗暴 但是简单  给router-view添加一个key属性 强制跳转刷新
   2. 还走缓存 但是在切换路由的再次执行一下获取数据的方法（依赖于生命周期的缓存在次执行） - 精细化 复杂 但性能高

  注意：性能优化是一个值得关注的问题 但是不是一个必须要做的事情 遇到了再做
  先考虑核心业务的视线 再考虑性能优化 [锦上添花]
  简历: 1. key的作用 配合diff  2. 做过哪些性能优化的事情 八股文方面：压缩文件等等  项目方面：[遇到了路由缓存问题 先使用key解决 但是发现破坏了缓存
  后来呀 我又发现了一种方案 新的钩子函数 可以在保证缓存还在的情况下 做精细化的更新]
 */

/* 更精细化的路由缓存跳转 onBeforeRouteUpdate方法

*/
